<!-- 余额明细 -->
<template>
	<view class="content page">
		<back-top v-if='showTop'></back-top>
		<status-bar :title='nameDefinition.balanceTitle+"明细"'></status-bar>
		<view v-if="pageData && pageData.length > 0">
			<view class="item_list" v-for="(item,index) in pageData" :key="index">
				<view class="list_info">
					<view class="info_box">
						<view class="info_title">{{item.title}}</view>
						<view class="info_time">{{item.addDate}}</view>
					</view>
					<view class="info_box infoboxt">
						<text v-if='item.status == 0' class="error-color"><text>-</text> {{item.money}}</text>
						<text v-if='item.status == 1' class="success-color"><text>+</text>{{item.money}}</text>
					</view>
				</view>
			</view>
			<view class="DiLine" v-if='!more'>---- 我也是有底线的 -----</view>
		</view>
		<view v-else>
			<empty type='1' cat='3' msg='暂无相关记录 !'></empty>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				showTop: false,
				pageData: [],
				page: 1,
				pageSize: 15,
				more: false,
			}
		},


		onLoad() {
			this.getpageData()
		},

		methods: {
			getpageData() {
				this.more = false
				this.$http.post({
					url: '/SRA_memberRecharge/moneyRecord',
					data: {
						VeriCode: this.bid,
						vId: this.vid,
						Y: '',
						M: '',
						pageIndex: this.page,
						pageSize: this.pageSize,
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.notice)
					const result = res.data || []
					this.pageData = [...this.pageData, ...result]
					if (result.length >= that.pageSize) {
						this.more = true
						this.page += 1
					}

				})
			}
		},
		onReachBottom(e) {
			if (!this.more) return
			this.getpageData()
		},
		computed: {
			...mapState(['vid', 'bid', 'color', 'nameDefinition', 'share'])
		},
		onShareAppMessage() {
			return {
				title: this.share.title,
				desc: this.share.desc,
				path: '/pages/index/index?share_v_id=' + this.vid,
				imageUrl: this.share.imageUrl
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 333) {
				this.showTop = true
			} else {
				this.showTop = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		font-size: 28rpx;
		color: #333333;
	}

	.item_list {
		width: 100%;
		border-bottom: 1px solid #F4F4F4;
	}

	.list_info {
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.info_box {
		width: 50%;
		height: 70rpx;
	}

	.info_title {
		font-size: 32rpx;
	}

	.info_time {
		color: #8A8A8A;
		font-size: 24rpx;
	}

	.info_money {
		font-size: 40rpx;
		color: #F86375;
	}

	.infoboxt {
		text-align: right;
		line-height: 70rpx;

		text {
			font-size: 36rpx;
			margin-right: 4rpx;

			text {
				font-size: 40rpx;
				font-weight: bold;
			}

		}
	}

	.nolist {
		text-align: center;
		color: #8A8A8A;
		line-height: 100rpx;
	}
</style>